<template>
  <el-drawer
    title="条件查询"
    :visible.sync="isShow"
    :direction="direction"
    :show-close="false"
    :size="drawerSize+'px'"
    @closed="closeWindow"
    :modal="modal"
  >
    <div class="filter-body">
      <div v-for="(item, index) in data" :key="index" class="filter-item">
        <div>条件{{ index + 1 }}：</div>
        <el-select
          v-if="index !== 0"
          v-model="data[index].logic"
          filterable
          placeholder="请选择一个逻辑"
          size="small"
        >
          <el-option
            v-for="item in options.logics"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="data[index].field"
          filterable
          placeholder="请选择一个字段"
          size="small"
        >
          <el-option
            v-for="item in options.fields"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="data[index].operator"
          placeholder="请选择关系"
          size="small"
        >
          <el-option
            v-for="item in options.operators"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="data[index].value"
          placeholder="输入欲查询的值"
          size="small"
        ></el-input>
        <el-button
          v-if="index + 1 === data.length && data.length < maxQueryCount"
          type="primary"
          icon="el-icon-plus"
          circle
          size="small"
          @click="addQuery()"
        ></el-button>
        <el-button
          v-if="index !== 0"
          type="danger"
          icon="el-icon-delete"
          circle
          size="small"
          @click="deleteQuery(index)"
        ></el-button>
      </div>
    </div>
    <div class="filter-footer">
      <el-button v-if="is_query_modified" @click="resetQuery()" type="warning"
        >重置</el-button
      >
      <el-button @click="confirm(data)" type="primary">查询</el-button>
      <el-button @click="closeWindow()">取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: "el-query-filter",
  data() {
    return {
      data: [{ field: "", operator: "", value: "", logic: "" }],
      queryCount: 1,
      drawerSize: 200,
    };
  },
  props: {
    modal:{
      type: Boolean,
      default: () =>{
        return false;
      }
    },
    maxQueryCount: {
      type: Number,
      default: () => {
        return 5;
      },
    },
    options: {
      type: Object,
      require: true,
    },
    direction: {
      type: String,
      default: () => {
        return "ttb";
      },
    },
    isShow: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  computed: {
    is_query_modified: {
      get() {
        if (
          this.data.length === 1 &&
          this.data[0].field === "" &&
          this.data[0].operator === "" &&
          this.data[0].value === "" &&
          this.data[0].logic === ""
        ) {
          return false;
        }
        return true;
      },
    },
  },
  methods: {
    addQuery() {
      if (this.data.length < this.maxQueryCount) {
        this.data.push({ field: "", operator: "", value: "", logic: "" });
        this.drawerSize = this.drawerSize + 40;
      }
    },
    deleteQuery(i) {
      this.data.splice(i, 1);
      this.drawerSize = this.drawerSize - 40;
    },
    resetQuery() {
      this.data = [{ field: "", operator: "", value: "", logic: "" }];
      this.drawerSize = 200;
    },
    handleQuery(data) {
      let returnData = [];
      for (const i in data) {
        if (
          data[i].field !== "" &&
          data[i].operator !== "" &&
          data[i].value !== "" &&
          (i === "0" || data[i].logic !== "")
        ) {
          returnData.push(data[i]);
        }
      }
      if (returnData.length > 0){
        returnData[0].logic = "";
      }
      return returnData;
    },
    closeWindow() {
      this.$emit("update:isShow", false);
    },
    confirm(d) {
      this.$emit("confirm", this.handleQuery(d));
      this.closeWindow();
    },
  },
};
</script>

<style scoped>
.filter-body {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  margin-right: 30px;
}
.filter-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 30px;
}
.filter-body > .filter-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 4px;
}
.filter-body > .filter-item > div {
  font-size: 15px;
  min-width: 60px;
}
.filter-body > .filter-item > .el-select {
  margin-right: 7px;
  width: 100%;
  max-width: 150px;
  min-width: 60;
}
.filter-body > .filter-item > .el-input {
  margin-right: 20px;
  width: 100%;
  max-width: 400px;
  min-width: 100px;
}
</style>
